export default class bullet {
    constructor(i, name, con, line) {
        this.i = i;
        this.ele;
        this.name = name;
        this.con = con;
        this.line = line;
        this.p = document.querySelector('.bullet-box')
        this.num = Math.ceil(this.p.offsetHeight/this.line)
        this.top = this.i % this.num * this.line
        this.delay = Math.floor(this.i / this.num) * 1000;
        this.run = false;
        this.speed =  Math.round(Math.random()+1)
    }
    draw() {
        console.log(1111);
        var speed = this.speed
        var div = document.createElement("div");
        div.className = 'bullet'
        var children = ` <div class="name">
        来自<span>${
            this.name
        }</span
        >的留言
      </div>
      <div class="text">${
            this.con
        }</div>`
        div.innerHTML = children
        this.ele = div
        this.ele.style.top = this.top + 'px'
        this.p.appendChild(this.ele)
        this.ele.onmouseover = ()=>{
            this.ele.children[0].className = 'name bullet-show'
            this.speed = 0
        }
        this.ele.onmouseout = ()=>{
            this.ele.children[0].className = 'name'
            this.speed = speed
        }
        this.ele.style.right = '-'+this.ele.offsetWidth+'px'
        this.ele.style.transform = 'translateX(0)'
        this.start()
    }
    start(){
        setTimeout(()=>{
            this.run = true
            this.move()
        },this.delay)
    }
    move(){
        var x= /[0-9]+/.exec(this.ele.style.transform)[0]
        if( x < this.p.offsetWidth){
            requestAnimationFrame(()=>{
                var a = `translateX(-${x-0+this.speed}px)`
                this.ele.style.transform = a
                this.move()
            })
        }else{
            this.run = false
            this.ele.style.display = 'none'
            this.ele.remove()
        }
    }


}
